<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thmyleaf.org">
<head>
    <meta charset="UTF-8">
    <title>数据展示页面</title>
</head>
<style>
    * {
        padding: 0px;
        margin: 0px;
    }
    .title {
        width: 200px;
        height: 30px;
        margin-top: 10px;
        margin-left: 38%;
        background-color: aqua;
        text-align: center;
        font-size: 10px;
        font-style: oblique;
        letter-spacing: 4px;
        border-radius: 5px;
    }
    .book-group {
        width: 500px;
        height: 180px;
        background-color: bisque;
        margin-left: 18%;
        margin-top: 10px;
        padding-top: 5px;
        border-radius: 10px;
        border: darkgreen 1px solid;
    }
    .book-group .book-image {
        height: 175px;
        width: 160px;
        box-sizing: border-box;
        border-radius: 10px;
        margin-left: 5px;
        margin-bottom: 5px;
        float: left;
    }
    .book-group .book-sketch {
        background-color: cadetblue;
        height: 175px;
        width: 180px;
        border: purple 1px solid;
        box-sizing: border-box;
        border-radius: 10px;
        margin-left: 5px;
        margin-bottom: 5px;
        float: left;
    }
    .book-group .book-about {
        background-color: darkorange;
        height: 175px;
        width: 140px;
        border: purple 1px solid;
        box-sizing: border-box;
        border-radius: 10px;
        margin-left: 5px;
        margin-bottom: 5px;
        float: left;
    }
    .book-info .book-group .book-image .book-img {
        width: 100%;
        height: 100%;
        border-radius: 10px;
    }
    .bs-title {
        font-size: 12px;
        font-style: normal;
        padding-left: 60px;
        color: purple;
    }
    .bs-content {
        font-size: 10px;
        margin-top: 5px;
    }
    .bk-abt {
        font-size: 8px;
        color: white;
        padding-top: 20px;
        padding-left: 10px;
    }
    .bk-buy {
        text-decoration: none;
        color: greenyellow;
        margin-top: 50px;
    }
</style>
<body>
    <div class="title">
        <h1>书籍信息展示</h1>
    </div>
    <div class="book-list">
        <!--规定每页显示10条书籍的数据（主要是做一个分页操作）-->
        <div class="book-info">
            <div class="book-group">
                <!--图片-->
                <div class="book-image">
                    <img th:src="@{/img/book-img/1.PNG}" class="book-img">
                </div>
                <!--书籍概述-->
                <div class="book-sketch">
                    <span class="bs-title"><i>书籍概述</i></span>
                    <br/>
                    <span class="bs-content">
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;本书包含掌握写出优质Java代码的基本技术,充分利用接口,lambda表达式和内存类的强大功能,充分利用新的Java I/O API,对象的序列化和正则表达式;高效地链接网络服务,实现客户端和服务器程序
                        等等......
                    </span>
                </div>
                <!--书籍作者和价格-->
                <div class="book-about">
                    <div class="bk-abt">
                        <!--书籍名称-->
                        <div class="book-name">
                            <span>书名:&nbsp;&nbsp;</span>
                            <span>Head&nbsp;First</span>
                        </div>
                        <!--作者信息-->
                        <div class="book-author">
                            <span>作者:&nbsp;&nbsp;</span>
                            <span>Kathy Sierra</span>
                        </div>
                        <br/>
                        <!--价格信息-->
                        <div class="book-price">
                            <span>RMB:&nbsp;&nbsp;</span>
                            <span>38.00</span>
                        </div>
                        <div class="book-buy">
                            <a href="https://detail.tmall.com/item.htm?id=567583275213&ali_refid=a3_430673_1006:1122008792:N:cprnrId5Zsjor2eBbCuJ4A==:b9da6b316ff4731da9b8b41f1980e7b1&ali_trackid=1_b9da6b316ff4731da9b8b41f1980e7b1&spm=a2e0b.20350158.31919782.2" class="bk-buy">购买链接</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="book-info">
            <div class="book-group">
                <!--图片-->
                <div class="book-image">

                </div>
                <!--书籍概述-->
                <div class="book-sketch">

                </div>
                <!--书籍作者和价格-->
                <div class="book-about">

                </div>
            </div>
        </div>
        <div class="book-info">
            <div class="book-group">
                <!--图片-->
                <div class="book-image">

                </div>
                <!--书籍概述-->
                <div class="book-sketch">

                </div>
                <!--书籍作者和价格-->
                <div class="book-about">

                </div>
            </div>
        </div>
        <div class="book-info">
            <div class="book-group">
                <!--图片-->
                <div class="book-image">

                </div>
                <!--书籍概述-->
                <div class="book-sketch">

                </div>
                <!--书籍作者和价格-->
                <div class="book-about">

                </div>
            </div>
        </div>
        <div class="book-info">
            <div class="book-group">
                <!--图片-->
                <div class="book-image">

                </div>
                <!--书籍概述-->
                <div class="book-sketch">

                </div>
                <!--书籍作者和价格-->
                <div class="book-about">

                </div>
            </div>
        </div>
        <div class="book-info">
            <div class="book-group">
                <!--图片-->
                <div class="book-image">

                </div>
                <!--书籍概述-->
                <div class="book-sketch">

                </div>
                <!--书籍作者和价格-->
                <div class="book-about">

                </div>
            </div>
        </div>
        <div class="book-info">
            <div class="book-group">
                <!--图片-->
                <div class="book-image">

                </div>
                <!--书籍概述-->
                <div class="book-sketch">

                </div>
                <!--书籍作者和价格-->
                <div class="book-about">

                </div>
            </div>
        </div>
        <div class="book-info">
            <div class="book-group">
                <!--图片-->
                <div class="book-image">

                </div>
                <!--书籍概述-->
                <div class="book-sketch">

                </div>
                <!--书籍作者和价格-->
                <div class="book-about">

                </div>
            </div>
        </div>
        <div class="book-info">
            <div class="book-group">
                <!--图片-->
                <div class="book-image">

                </div>
                <!--书籍概述-->
                <div class="book-sketch">

                </div>
                <!--书籍作者和价格-->
                <div class="book-about">

                </div>
            </div>
        </div>
        <div class="book-info">
            <div class="book-group">
                <!--图片-->
                <div class="book-image">

                </div>
                <!--书籍概述-->
                <div class="book-sketch">

                </div>
                <!--书籍作者和价格-->
                <div class="book-about">

                </div>
            </div>
        </div>
    </div>
    <!--分页导航-->
    <div class="book-Pagination">

    </div>
    <!--增加，删除，更新数据-->
    <div class="option">

    </div>
</body>
</html>